<template>
    <div>
        <el-dialog
            v-model="questionAlldialog"
            title="批量导入试题"
            width="30%"
            :before-close="handleClose"
        >
            <div class="batch">
                <div class="leftBatch">
                    <el-steps direction="vertical" active="0">
                        <el-step  />
                        <el-step  />
                    </el-steps>
                </div>
                <div class="rightBatch">
                    <p class="p1">下载 <span class="blue" @click="handleDownloadFile('http://estate.eshareedu.cn/exam/upload/question.xlsx','试题模板')">试题模板</span>，批量导入试题</p>
                    <p class="red">注:从其他Excel或Word复制试题时请使用选择性粘贴 Word:右键一选择性粘贴-文本， Excel:右键一选择性粘贴一只勾选 “值”</p>
                    <p class="p1">上传填写好的试题表</p>
                </div>
            </div>
            <div class="uploadBox">
                <el-upload
                    name="file"
                    ref="Aupload"
                    class="upload-demo"
                    action="http://estate.eshareedu.cn/exam/api/test/upload"
                    :headers="Authorization"
                    :limit="1"
                    :auto-upload="true"
                    :on-success="addFile"
                >
                    <template #trigger>
                    <el-button type="primary" style="font-size:12px;margin:15px 35px">点击上传文件</el-button>
                    </template>
                </el-upload>
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="questionAlldialog = false">取消</el-button>
                <el-button type="primary" @click="determine ">
                确定
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref ,defineEmits,reactive,toRefs,watch} from "vue";
import { ElMessage } from 'element-plus'
import {  handleDownloadFile} from "../../utils/utils";


const data:any = reactive({
    questionAlldialog: false,
    Authorization:{Authorization:sessionStorage.getItem('token')},
    list:[]
});
const {questionAlldialog,Authorization }:any = toRefs(data);
const props=defineProps({
    isImport:{
        type:Boolean
    }
})
watch([props],()=>{
    questionAlldialog.value=props.isImport
})
const emits=defineEmits(['isImport','imports'])

const handleClose = (done: () => void) => {
    done()
    emits('isImport',false)
}
// 确定
const determine=()=>{
    // 不能为空
    if(data.list.length===0){
        ElMessage.error('请上传试题')
        return false
    }else{
        questionAlldialog.value=true
        emits('isImport',false)
        emits('imports',data.list)
    }
}
// 上传
const addFile=async(file:any)=>{
    // console.log(file);
    if(file.errCode===10000){
        data.list=file.data.map((item:any)=>({...item,title:item.title}))
        emits('isImport',false)
    }
    
}


</script>

<style scoped lang="less">
.batch{
    display:flex;
    .leftBatch{
        height: 120px;
        width: 30px;
    }
    .rightBatch{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        .p1{
            font-size: 16px;
            color: #c0c4cc;
            .blue{
                color: rgb(19, 79, 253);
                cursor: pointer;
            }
        }
        .red{
            font-size: 10px;
            color: #f9492d;
        }
    }
}
.uploadBox{
    width: 90px;
    margin: 10px 50px;
}
</style>